<template>
  <div v-bind="$attrs" :class="props.element.className || 'loc-point-mark'" class="absolute layer-btn-wrapper" @click="generalEvent">
    <button class="layer-btn">
      <px-icon class="w-[32px] h-[48px]">
        <SwitchIcon />
      </px-icon>
    </button>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, reactive, ref, toRaw, toRefs, watch } from "vue";
import SwitchIcon from "@visual/assets/switch.svg?component";
import { eventBus } from "@/views/all/visual/template/utils";

const props = defineProps<{
  propValue?: {
    title: string;
    tip: string;
    routerKey: string;
  };
  remoteData?: { [key: string]: any };
  element?: { [key: string]: any };
}>();
const toggleName = ref("front"); //front  back

const emits = defineEmits(["generalEvent"]);

const generalEvent = ({ name }) => {
  if (name) {
    toggleName.value = "front";
    emits("generalEvent", { type: "compFilter", compEmitData: name });
    return;
  }
  if (toggleName.value === "front") toggleName.value = "back";
  else toggleName.value = "front";
  emits("generalEvent", { type: "compFilter", compEmitData: toggleName.value });
};
onMounted(() => {
  eventBus.on("layerSwitch", name => {
    generalEvent({ name });
  });
});
onUnmounted(() => {
  eventBus.off("layerSwitch");
});
</script>
<style lang="scss" scoped>
.ishover {
  background-color: #3b82f6 !important;
}

.layer-btn-wrapper {
  right: 0;
  bottom: 0;
}

.layer-btn {
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 16%);
}

:deep(.px-icon svg) {
  width: 32px;
  height: 32px;
  color: #a0a0a0;
}

:deep(.px-icon svg):hover {
  width: 32px;
  height: 32px;
  color: #3b82f6;
}
</style>
